<template>
	<!-- 经验交流 -->
	<view class="box">
		<view v-if="listData.length">
			<u-list>
				<u-list-item v-for="(item, index) in listData" :key="item.id">
					<view class="card" @click="handleGodetail(item)">
						<text class="card_title">{{ item.title }}</text>
						<view class="card_desc line2">
							{{ item.content }}
						</view>
						<view class="card_bot flex fjb ">
							<view class="card_bot_left">
								<image src="../../static/img/user.png" mode=""></image>
								<text>{{ item.creator }}</text>
							</view>
							<view class="card_bot_right">
								<text style="margin-right: 20rpx;">{{ item.commentNum }}评论</text>
								<text>{{ item.viewNum }}阅读</text>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<view v-else class="empty_box" style="margin-top: 150rpx;">
			<u-empty mode="data" icon="/static/img/empty.png" text="暂无帖子"></u-empty>
		</view>
		<!-- <view class="releaseBtn">
			<u-button @click="handleRelease" shape="square" :custom-style="releaseBtnCS">发布帖子</u-button>
		</view> -->
	</view>
</template>

<script>
	import{
		addOrUpdateApi,
		addViewByIdApi,
		deleteByIdApi,
		queryListByPageApi
	}from '../../common/API/articleApi.js'
	export default {
		data() {
			return {
				listData: [],
				releaseBtnCS: {
					width: "240rpx",
					height: "80rpx",
					borderRadius: "40rpx",
					color: "#fff",
					backgroundColor: "#00B4C7",
					fontSize: "28rpx"
				},
				pageNum: 1,
				pageSize: 10,
				total: 0,
				//判断是否请求完毕数据
				isBottom: false,
				//底部文字
				bottomText: '加载中...',
			}
		},
		onLoad() {
			// uni.startPullDownRefresh();
		},
		async onShow() {
			this.listInit()
		},
		// 上拉加载
		async onReachBottom() {
			console.log('上拉加载')
			if (this.listData.length >= this.total) {
				return uni.$showMsg('已经到底了')
			}
			this.pageNum = this.pageNum + 1
			console.log('当前页码',this.pageNum)
			this.queryListByPage()
		},
		// 下拉加载
		onPullDownRefresh() {
			console.log('下拉加载')
			this.listInit()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			listInit() {
				this.pageNum = 1
				this.listData = []
				this.isBottom = false
				this.bottomText = '加载中...'
				this.queryListByPage()
			},
			// scroll-view到底部加载更多
			// onreachBottom() {
			// 	if (!this.isBottom) {
			// 		this.pageNum += 1
			// 		this.queryListByPage()
			// 	}
			// },
			// scrolltolower() {
			// 	this.loadmore()
			// },
			loadmore() {
			},
			handleRelease() {
				uni.navigateTo({
					url: '/pagesA/postMessage/postMessage'
				})
			},
			// 详情
			async handleGodetail(item) {
				// 浏览数+1
				await addViewByIdApi(item.id)
				let objectData = JSON.stringify(item)
				
				console.log('传参',objectData)
				uni.navigateTo({
					url: `/pagesA/articleComments/articleComments?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			async queryListByPage(){
				const res = await queryListByPageApi({
					pageNum: this.pageNum,
					pageSize: 10,
					type: 2
				})
				if(res.status == 200){
					this.listData = this.listData.concat(res.data.records)
					this.total = res.data.total
				}
				
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.box {
		width: 90%;
		margin: 30rpx auto;

		.card {
			margin: 16rpx 0rpx 16rpx 0rpx;
			font-size: 28rpx;
			.card_title {
				color: #333;
				font-size: 34rpx;
			}

			.card_desc {
				color: #ccc;
				margin: 20rpx 0;
			}

			.card_bot {
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
				}

				.card_bot_left {
					display: flex;
					align-items: center;
				}

				.card_bot_right {
					color: #ccc;
				}
			}
		}
		.releaseBtn{
			position: absolute;
			bottom: 100rpx;
			left: 50%;
			margin-left: -120rpx;
		}
	}
</style>